<template>
    <div class="tagsPages" v-if="$store.state.tagsPages.length">
        <div :class="['pages','point',$route.name === item.name ? 'active' : '']" v-for="(item,index) in $store.state.tagsPages" v-bind:key="index" @click.stop="goTabPage(item)">
            {{ item.title }}
            <i class="el-icon el-icon-circle-close" @click.stop="delTab(item.path,item.name)" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import store from '@/store/index'
export default defineComponent({
    props: ['dataTitle', 'list', 'width', 'isCloseType'],
    data () {
        return {
            includeList: [] as string[],
            $store: store
        }
    },
    watch: {
        async $route (to: {meta:{keepAlive: boolean}, path:string, name:string}) {
            // $store.state.tagsPages.map(item=>item.name)
            if (to.meta.keepAlive !== false && (this.includeList = store.state.tagsPages.map(item => item.name)).indexOf(to.name) === -1) {
                console.log(1);
                if (store.state.tagsPages.some((item: { path: string }) => item.path === to.path) && (to.meta.keepAlive === true || to.meta.keepAlive !== false)) { return }
                console.log(2);
                store.commit('addPage', this.$route)
            }
        }
    },
    methods: {
        close () {
            this.$emit('close')
        },
        delTab (page:string, name:string) {
            console.log(page, name, '1234556')
            store.commit('delPage', { page, name })
        },
        goTabPage (item: any) {
            console.log(121, item);
            this.$router.push({
                path: item.path
            })
        }
    }
})
</script>

<style scoped lang="stylus">
.tagsPages
    display flex
    border 1px solid #DFE0EB
    display inline-flex
    border-radius 4px
    // padding 2px
    box-sizing border-box
    flex-wrap wrap
    .pages
        padding 9px 15px
        box-sizing border-box
        min-width 102px
        text-align center
        color color-black
        background #fff
        margin 1px
    .active
        background #E8F3FE
        color #1989FA
.alert-box
    padding 0 30px 30px 30px
    box-sizing border-box
</style>
